<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<link rel="stylesheet" href="/static/home/css/ydui.css" />
		<link rel="stylesheet" href="/static/home/css/mydian.css" />
		<title>添加店铺</title>
	</head>

	<body style="background-color: #f1f4f8;padding-bottom: 68px">
		<div class="add-shop-box">
			<form action="">
				<div class="mess-box">
					<div class="col-list head-mg">
						<input type="file" name="shop_avatar" class="user-photo" id="filed"/>
						<input type="hidden" name="vid" value="{$vid}">
						<div class="form-list head-box">
							<span>头像</span>
							<img src="/static/home/images/dkhbjr.png" alt="" id="imgshow"/>
							<img src="/static/home/images/jtgr_icon.png" alt="" class="jts"/>
						</div>
					</div>
					<div class="col-list">
						<div class="form-list">
							<span>店铺名称</span>
							<input type="text" name="shop_name" class="shopname" placeholder="请输入您的商铺名称" />
						</div>
					</div>
					<div class="col-list">
						<div class="form-list">
							<span>手机号码</span>
							<input type="text" class="phone" name="shop_phone" placeholder="请输入您的手机号码" />
						</div>
					</div>
					<div class="col-list adress-boxs">
						<div class="form-list adress-box">
							<span>商铺地址</span>
							<textarea name="shop_address" rows="" cols="" class="adress" placeholder="请输入详细地址信息"></textarea>
						</div>
					</div>

					<div class="col-list adress-boxs">
						<div class="form-list adress-box">
							<span>店铺签名</span>
							<textarea name="shop_signature" rows="" cols="" class="shop_signature" placeholder="请输入店铺签名"></textarea>
						</div>
					</div>
				</div>
				<div class="col-list mrg-tp">
					<div class="form-list">
						<span style="flex: 1;-ms-flex: 1;">设置默认展示有店二维码</span>
						<div class="btn-swith">
							<div class="circle" id="shop_status" data-open='0'></div>
						</div>
					</div>
				</div>
				<div class="btn-save">
					<button type="button">保存设置</button>
				</div>
			</form>
		</div>
		<script src="/static/home/js/jquery-1.12.4.min.js"></script>
		<script src="/static/home/js/ydui.js"></script>
		<script type="text/javascript">
			var codes = $(".btn-swith").children(".circle").attr("data-open");
			var regedg = /^1[345789]\d{9}$/;
			if(codes == "1") {
				$(".btn-swith").children(".circle").css({
					"right": "21px"
				})
				$(".btn-swith").css("background-color", "#ddd")
				$(".btn-swith").children(".circle").attr("data-open", "0")
			} else {
				$(".btn-swith").children(".circle").css({
					"right": "1px"
				})
				$(".btn-swith").css("background-color", "#5dc054")
				$(".btn-swith").children(".circle").attr("data-open", "1")
			}
			$(".btn-swith").on("click", function() {
				var code = $(this).children(".circle").attr("data-open");
				//开关按钮 当code等于1是为打开状态 不为1时为关闭状态
				if(code == "1") {
					$(this).children(".circle").animate({
						"right": "21px"
					})
					$(this).css("background-color", "#ddd")
					$(this).children(".circle").attr("data-open", "0")
				} else {
					$(this).children(".circle").animate({
						"right": "1px"
					})
					$(this).css("background-color", "#5dc054")
					$(this).children(".circle").attr("data-open", "1")
				}
			})
			//在input file内容改变的时候触发事件
			$('#filed').change(function() {
				var file = $('#filed').get(0).files[0];
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					//读取成功后返回的一个参数e，整个的一个进度事件
					if(file.type == "image/png" || file.type == "image/jpg" || file.type == "image/bmp" || file.type == "image/jpeg"){
						//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
						//的base64编码格式的地址
						// $("input[name='shop_avatar']").val(e.target.result);
						$('#imgshow').get(0).src = e.target.result;
					}else{
						YDUI.dialog.toast('请选择正确的图片格式！', 'none', 1000);
						return;
					}
					var size = 1048576;
					if(file.size > size){
					YDUI.dialog.toast('请选择图片大小为1M以内！', 'none', 1000);
					return;
					}
				}
				
			})
			$(".btn-save button").on("click",function(){
				var shop_name = $(".shopname").val();
				var phone_number = $(".phone").val();
				var adress_name = $(".adress").val();
				var shop_avatar = $("#filed").val();
				var vid = $("input[name=vid]").val();
				if(shop_name == "" || phone_number == "" || adress_name == "" || shop_avatar == ""){
					YDUI.dialog.toast('请确保您的信息不能为空！', 'none', 1000);
					return;
				}
				if(!regedg.test(phone_number)){
					YDUI.dialog.toast('请输入正确的手机号码！', 'none', 1000);
					return;
				}
				// YDUI.dialog.loading.open('正在添加中...');
				$.post("{:url('shop/insert')}",{
						is_open : $("#shop_status").attr('data-open'),
						name: shop_name,
						address: adress_name,
						tel: phone_number,
						avatar: $("#imgshow").attr('src'),
						signature: $('.shop_signature').val(),
						vid:vid
					},function(data){
					YDUI.dialog.loading.close();
					if(data.code == 1){
						YDUI.dialog.toast('保存成功', 'success', 1000, function() { /* 关闭后调用 */
							location.replace("{:url('shop/index')}");
						});
					}else{
						YDUI.dialog.toast(data.msg, 'error', 1000);
					}
				},'json')
			})
		</script>
	</body>
</html>